<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./css/common.css" rel="stylesheet" type="text/css">
    <script src="./js/vue.js" type="text/javascript"></script>
    <script src="./js/axios.min.js" type="text/javascript"></script>
    <script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <nav class="app_nav">
            <div class="logo">DECENUMBER</div>
            <div class="app_menu">
                <div style="border-bottom: 2px solid #409EFF;">
                    <ul class="show">
                        <li><a @click="index_document('api')" class="big" href="#">API模块</a></li>
                        <li><a @click="index_document('super')" class="big" href="#">SUPER模块</a></li>
                    </ul> 
                </div>
                <ul v-for="(row, index) in api_data" class="show">
                    <li>
                        <a v-if="row.title" href="#">
                            {{row.title}}
                        <a v-else href="#">
                            API接口{{index}}
                        </a>
                        <ul v-if="row.api" class="show">
                            <li v-for="(it, ik) in row.api">
                                <a v-if="it.title" @click="show_doc(index, ik)" href="#top">{{it.title}}</a>
                                <a v-else @click="show_doc(index, ik)" href="#top">接口{{ik}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <nav class="app_content" id="top">
            <div class="header">
                <div>文档接口</div>
                <div><a href="#" @click="index_document('', 1)">强制重载</a></div>
            </div>
            <div v-if="JSON.stringify(doc) != '{}'" class="content">
                <h2>{{doc.title}}</h2>
                <div class="headline">
                    <h3>API地址</h3>
                </div>
                <div class="url">
                    <div v-for="mv in doc.method">{{mv}}</div>
                    <a v-if="doc.url" href="#">{{domain}}{{doc.url}}</a>
                    <a v-else href="#">无</a>
                </div>
                <div class="headline">
                    <h3>请求参数</h3>
                </div>
                <div>
                    <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th scope="col">参数</th>
                            <th scope="col">类型</th>
                            <th scope="col">必传</th>
                            <th scope="col">解释</th>
                        </tr>
                    </thead>
                    <tbody v-if="doc.param">
                        <tr v-for="pv in doc.param">
                            <th scope="row">{{pv[3]}}</th>
                            <td>{{pv[1]}}</td>
                            <td>{{pv[2]}}</td>
                            <td>{{pv[4]}}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <div class="headline">
                    <h3>返回参数</h3>
                </div>
                <div>
                    <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th scope="col">参数</th>
                            <th scope="col">类型</th>
                            <th scope="col">必传</th>
                            <th scope="col">解释</th>
                        </tr>
                    </thead>
                    <tbody v-if="doc.return">
                        <tr v-for="pv in doc.return">
                            <th scope="row">{{pv[3]}}</th>
                            <td>{{pv[1]}}</td>
                            <td>{{pv[2]}}</td>
                            <td>{{pv[4]}}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
            <div v-else class="content">
                <h2>文档接口</h2>
            </div>
        </nav>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                api_data: {},
                domain: '',
                model: '',
                doc: {},
            },
            created: function (){

            },
            methods: {
                index_document: function (m, r){
                    this.model = m == '' ? this.model : m;
                    var the = this;
                    if (r == undefined || r == 0) {
                        var local_doc = window.sessionStorage.getItem(the.model);
                        var local_dom = window.sessionStorage.getItem('api_domain');
                        // console.log(local_doc);
                        if (local_doc) {
                            the.api_data = JSON.parse(local_doc);
                            the.domain = local_dom;
                            return true;
                        }
                    }
                    axios.post(de.index_document, {model:the.model, reset:r}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        // 重载数据
                        the.api_data = dd.data;
                        the.domain = dd.domain;
                        // 保存数据到缓存中
                        window.sessionStorage.setItem(the.model, JSON.stringify(dd.data));
                        window.sessionStorage.setItem('api_domain', JSON.stringify(dd.domain));
                        if (m == '') { alert('强制重载成功'); }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                show_doc: function ( i , v ){
                    this.doc = this.api_data[i].api[v]
                },
                menu_run: function (){
                    document.querySelector('.app_menu a').onclick = function (){
                        alert(234);
                    };
                }
            }
        });
    </script>
</body>
</html>